<template>
  <div>
    <li>
      <input type="checkbox" name="matter" id="" :checked="todo.done" @change="handleCheck(todo.id)">
      &nbsp;{{todo.title}}
      <button class="delete" @click="handleDelete(todo.id)">删除</button>
    </li>
  </div>
</template>

<script>
  export default {
      name: "Item",
      //声明接收todo对象
      props:['todo','checkTodo','deleteTodo'],
      methods:{
        //勾选or取消勾选
        handleCheck(id){
          //通知App组件将对应的todo对象的done值取反
          this.checkTodo(id)
        },
        //删除
        handleDelete(id){
          if(confirm('确定删除吗？')){
            console.log(id)
            this.deleteTodo(id)
          }
        }
      }
  }
</script>

<style scoped lang="less">
li{
  //height: 35%;
  //width: 96%;
  display: block;
  //background-color: pink;
  margin: auto;
  padding: 12px;
  border-top: 1px solid rgba(87, 87, 87, 0.3);
  //border-left: 1px solid rgba(87, 87, 87, 0.3);
  //border-right: 1px solid rgba(87, 87, 87, 0.3);
  //box-sizing: border-box;
  border-collapse: collapse;
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      background-color: #c9302c;
      border: 1px solid #ac2925;
    }
  }
  &:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
</style>
